<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="css/registerCommon.css">
</head>
<body>
    <div class="nav">电子物品交易</div>
    <div class="container">
      <!-- 注册对话框 -->
      <div class="dialog">
          <h2>用户注册</h2>
          <div class="row">
              <span id="span-phone">手机号</span>
              <input class="register-input" type="number" id="phone" name="phone" placeholder="请输入手机号">
          </div>
          <div class="row">
              <span id="span-email">邮箱</span>
              <input class="register-input" type="text" id="email" name="email" placeholder="请输入邮箱地址">
          </div>
          <div class="row">
              <span id="span-password">密码</span>
              <input class="register-input" type="password" id="password" name="password" placeholder="请输入密码">
          </div>
          <div class="row">
              <span id="span-confirm">确认</span>
              <input class="register-input" type="password" id="confirm" name="confirm" placeholder="请确认密码">
          </div>
          <div class="row">
              <span id="span-name">昵称</span>
              <input class="register-input" namtype="text" id="name" name="name" placeholder="请输入昵称">
          </div>
          <div class="row">
              <span id="span-emailCode">验证码</span>
              <input class="register-input" name="emailCode" id="emailCode" placeholder="请输入验证码" type="number">
          </div>
          <div class="emailCode">
              <span onclick="getEmailCode()" style="cursor: pointer;">获取验证码</span>
          </div>
          <div class="row">
              <button class="submit" onclick="register()">注册</button>
          </div>

      </div>

    </div>

    <script src="js/jQuery.min.js"></script>
    <script>
        let countdown;
        const interval = 60; // 倒计时时间，单位为秒
        function getEmailCode() {
            if($('#email').val() === null || $('#email').val() === "") {
                alert("请输入邮箱");
                return;
            }
            const btn = document.querySelector('.emailCode span');
            btn.innerHTML = `重新获取(${interval})`;
            btn.onclick = null;
            countdown = setInterval(() => {
                const remainingTime = parseInt(btn.innerHTML.match(/\d+/)[0]);
                if (remainingTime > 1) {
                    btn.innerHTML = `重新获取(${remainingTime - 1})`;
                } else {
                    clearInterval(countdown);
                    btn.onclick = getEmailCode;
                    btn.innerHTML = '获取验证码';
                }
            }, 1000);

            $.ajax({
                url: "/user/sendVerifyCode",
                type: "get",
                data: {
                    email: $('#email').val()
                },
                success(data) {
                    if (data.code === "SUCCESS") {
                        alert("验证码发送成功")
                    } else {
                        alert(data.errMsg);
                    }
                }, error: function () {
                    alert("请求发送失败");
                }
            });
        }

        function register() {
            //校验参数
            let pass = true;
            $('.register-input').each(function () {
                let inputValue = $(this).val();
                if (inputValue === null || inputValue === "") {
                    const labelText = $(this).prev('span').text();
                    pass = false;
                    alert("请输入" + labelText);
                    return false;
                }
            });
            if (!pass) {
                return;
            }
            if ($('#password').val() != $('#confirm').val()) {
                alert("两次输入密码不一致");
                return;
            }
            $.ajax({
                url: "/user/register",
                type: "post",
                data: {
                    phone: $('#phone').val(),
                    email: $('#email').val(),
                    password: $('#password').val(),
                    confirm: $('#confirm').val(),
                    name: $('#name').val(),
                    emailCode: $('#emailCode').val()
                },
                success(data) {
                    if (data.code === "SUCCESS") {
                        alert(" 注册成功！")
                        location.href = "login.html";
                    } else {
                        alert(data.errMsg);
                    }
                }
                , error: function () {
                    alert("请求发送失败");
                }
            });
        }
      
    </script>
</body>
</html>